<template>
  <div class="annual-refinement-management">
    <!-- 第一行：标题和导出按钮 -->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="12">
        <h3>年报精细化管理</h3>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button type="primary" icon="Download" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <!-- 第二行：Tab切换组件 -->
    <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
      <el-tab-pane label="市场主体年报精细化管理" name="marketEntity"></el-tab-pane>
      <el-tab-pane label="企业年报精细化管理" name="enterprise"></el-tab-pane>
      <el-tab-pane label="年报分类管理类型" name="classification"></el-tab-pane>
    </el-tabs>

    <!-- 第三行：表格 -->
    <div v-if="activeTab === 'marketEntity'" class="table-container">
      <el-table :data="marketEntityData" style="width: 100%" border v-loading="loading">
        <el-table-column prop="name" label="年报主动性类型" width="180"></el-table-column>
        <el-table-column prop="yingbs" label="应报数" width="120"></el-table-column>
        <el-table-column prop="yibs" label="已报数" width="120"></el-table-column>
        <el-table-column prop="wbs" label="未报数" width="120"></el-table-column>
        <el-table-column prop="bsv" label="报送率" width="120"></el-table-column>
      </el-table>
    </div>

    <div v-if="activeTab === 'enterprise'" class="table-container">
      <el-table :data="enterpriseData" style="width: 100%" border v-loading="loading">
        <el-table-column prop="name" label="年报主动性类型" width="180"></el-table-column>
        <el-table-column prop="yingbs" label="应报数" width="120"></el-table-column>
        <el-table-column prop="yibs" label="已报数" width="120"></el-table-column>
        <el-table-column prop="wbs" label="未报数" width="120"></el-table-column>
        <el-table-column prop="bsv" label="报送率" width="120"></el-table-column>
      </el-table>
    </div>

    <div v-if="activeTab === 'classification'" class="table-container">
      <el-table :data="classificationData" style="width: 100%" border v-loading="loading">
        <el-table-column prop="name" label="市场主体类型" width="180"></el-table-column>
        <el-table-column prop="yingbs" label="应报数" width="120"></el-table-column>
        <el-table-column prop="yibs" label="已报数" width="120"></el-table-column>
        <el-table-column prop="wbs" label="未报数" width="120"></el-table-column>
        <el-table-column prop="bsv" label="报送率" width="120"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { getMarketEntityData, getEnterpriseData, getClassificationData } from '@/api/annual-report'

  const activeTab = ref('marketEntity')
  const loading = ref(false)

  // 市场主体年报精细化管理数据
  const marketEntityData = ref([])

  // 企业年报精细化管理数据
  const enterpriseData = ref([])

  // 年报分类管理类型数据
  const classificationData = ref([])

  // 处理Tab切换
  const handleTabChange = (tabName) => {
    fetchData(tabName)
  }

  // 获取数据
  const fetchData = async (tabName) => {
    loading.value = true
    try {
      switch (tabName) {
        case 'marketEntity':
          const marketRes = await getMarketEntityData({ "code": "hasj_dnnbfl" })
          console.log("marketRes:", marketRes);
          if (marketRes.code === 200 && marketRes.data && marketRes.data.code === 200) {
            marketEntityData.value = marketRes.data.data
          }
          break
        case 'enterprise':
          const enterpriseRes = await getEnterpriseData({})
          if (enterpriseRes.code === 200 && enterpriseRes.data && enterpriseRes.data.code === 200) {
            enterpriseData.value = enterpriseRes.data.data
          }
          break
        case 'classification':
          const classificationRes = await getClassificationData({})
          if (classificationRes.code === 200 && classificationRes.data && classificationRes.data.code === 200) {
            classificationData.value = classificationRes.data.data
          }
          break
      }
    } catch (error) {
      console.error('获取数据失败:', error)
    } finally {
      loading.value = false
    }
  }

  // 导出功能
  const handleExport = () => {
    // 实现导出功能
    console.log('导出数据')
  }

  // 初始化加载数据
  onMounted(() => {
    fetchData(activeTab.value)
  })
</script>

<style scoped>
  .annual-refinement-management {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
  }
</style>